<template>
    <div class="example1-wrapper">
        <div style="display:block;">
            <span style="color:#000000;font-size:20px;float:left;margin-right:20px;margin-bottom:20px;">搜索商户:</span>
            <bk-select :disabled="false" v-model="mername" style="float:left;width: 250px;"
                ext-cls="select-custom"
                ext-popover-cls="select-popover-custom"
                searchable>
                <bk-option v-for="option in data"
                    :key="option.id"
                    :id="option.username"
                    :name="option.realname">
                </bk-option>
            </bk-select>
        </div>
        <div style="margin-top:10px;">
            <bk-card v-for="item in data" :key="item" title="商户信息" class="card">
                <p>用户名:{{ item.username }}</p>
                <p>真实姓名:{{ item.realname }}</p>
                <p>地址:{{ item.address }}</p>
                <p>电话:{{ item.tel }}</p>
            </bk-card>
        </div>
    </div>
</template>

<script>
    export default {
        components: {
        },
        data () {
            const user = sessionStorage.getItem('user')
            if (user) {
                const username1 = JSON.parse(user)
                this.username = username1
            }
            this.getmerchant()
            return {
                username: '',
                mername: '',
                // src: './static/images/1.jpg',
                total: {
                    num: 0
                },
                digits: 1,
                orderdialog: {
                    custom1: {
                        visible: false,
                        position: {
                            top: 100
                        }
                    }
                },
                data: [
                ],
                Merlist: [
                ]
            }
        },
        watch: {
            data: {
            }
        },
        methods: {
            /**
             * 获取页面数据
             *
             * @return {Promise} promise 对象
             */
            getmerchant () {
                this.axios({
                    url: '/getmerchant/',
                    method: 'post',
                    responseType: 'json'
                }).then(res => {
                    for (const i in res.data.result_data) {
                        const tmp = {
                            username: '',
                            realname: '',
                            address: '',
                            tel: ''
                        }
                        tmp.realname = res.data.result_data[i].realname
                        tmp.address = res.data.result_data[i].address
                        tmp.username = res.data.result_data[i].username
                        tmp.tel = res.data.result_data[i].tel
                        this.$set(this.data, i, tmp)
                    }
                })
            },
            check () {
                if (this.mername === '') {
                    this.$bkInfo({
                        title: '请选择商户'
                    })
                } else {
                    const tmp = {
                        flag: 0
                    }
                    for (const i in this.data) {
                        if (this.data[i].num !== 0) {
                            tmp.flag = 1
                            break
                        }
                    }
                    if (tmp.flag === 0) {
                        this.$bkInfo({
                            title: '请添加衣物'
                        })
                    } else {
                        this.orderdialog.custom1.visible = true
                    }
                    // this.placeorder()
                }
            }
        }
    }
</script>

<style scoped>
.card {
    width: 555px;
    display: inline-block;
    margin-right: 10px;
}
</style>
